﻿@using MudBlazor.Services
@namespace MudBlazor.Docs.Examples
@implements IAsyncDisposable

<MudAlert Severity=Severity.Warning>
	MudBlazor 5.2 introduced new implementations for handling browser resize events.
	The <strong>IResizeListenerService</strong> can still be used but we strongly encourage you to move to the 
	<strong>IResizeService </strong>
</MudAlert>

<MudCard Class="pa-5">
    <MudText>
        Resize the window and see width and height change:<br />
        Browser window is @(width)x@(height)px
    </MudText>
</MudCard>

@code
{
	[Inject] IResizeService ResizeService { get; set; }

    int width = 0;
    int height = 0;

	private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
			_subscriptionId = await ResizeService.Subscribe((size) =>
			{
				width = size.Width;
				height = size.Height;
				InvokeAsync(StateHasChanged);
			}, new ResizeOptions
			{
				ReportRate = 50,
				NotifyOnBreakpointOnly = false,
			});

            var size = await ResizeService.GetBrowserWindowSize();
            height = size.Height;
            width = size.Width;
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await ResizeService.Unsubscribe(_subscriptionId);
}
